<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
</head>
<style type="text/css">
   p{
       padding: 5px;
       border: medium double black;
       background-color: lightgray;
       font-family: sans-serif;
   }
   #banana{
       font-size: x-large;
       border: medium solid white;
       background-color: green;
       color: white;
       padding: 4px;
       /* 看了一下F12 变换已经不起作用了 */
       /* -webkit-transform: rotate(-45deg) scaleX(1.2); */
   }
</style>

<body>
    <p id="fruittext">
        There are lots of different kinds of fruit - there are over 500 varieties
        of <span id="banana">banana</span> alone. By the time we add the countless
        types of apples, oranges, and other well-known fruit, we are faced with thousands of choides.
    </p>
</body>

</html>